<template>
    <div class="form">
        <el-form :rules="formRules" ref="formRef" :model="ownerInformation">
            <el-form-item label="性别" prop="gender">
                <el-select v-model="ownerInformation.gender" placeholder="性别">
                <el-option label="男" value="男" />
                <el-option label="女" value="女" />
                </el-select>
            </el-form-item>
            <el-form-item label="姓名" prop="name">
                <el-input v-model="ownerInformation.name" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
                <el-input v-model="ownerInformation.age" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="身份证" prop="identityCard">
                <el-input v-model="ownerInformation.identityCard" placeholder="请输入"></el-input>
            </el-form-item>
        </el-form>
    </div>
    <div class="type">
        <el-form :class="'type1'" :rules="formRules" ref="formRef" :model="ownerInformation">
            <el-form-item label="手机" prop="phone">
            <el-input v-model="ownerInformation.phone" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="微信" prop="wechat">
            <el-input v-model="ownerInformation.wechat" placeholder="请输入"></el-input>
            </el-form-item>
        </el-form>
        <el-form :class="'pattern'" :rules="formRules" ref="formRef" :model="ownerInformation">
            <el-form-item label="备注" prop="remark">
            <el-input v-model="ownerInformation.remark" placeholder="请输入"></el-input>
            </el-form-item> 
            <el-form-item label="qq" prop="qq">
            <el-input v-model="ownerInformation.qq" placeholder="请输入"></el-input>
            </el-form-item>
        </el-form>                 
    </div>
    <div class="button">
      <e1-form-item>
      <el-button type="info"@click ="cancel">取消</el-button>
      <el-button type="primary"@click="save(formRef)">确定</el-button>
      </e1-form-item>
   </div>
       
</template>

<script setup>
import http from '../utils/http'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
let router = useRouter()
import { onBeforeMount, ref } from 'vue'
let ownerInformation = ref({
    id: router.currentRoute.value.query.id,
    gender: '',
    name: '',
    age: '',
    identityCard: '',
    phone: '',
    remark: '',
    wechat: '',
    qq: ''
})
let formRef = ref(null)
let formRules = ref({
    gender: [
        { required: true, message: '请输入', trigger: 'blur' }
    ],
    name: [
        { required: true, message: '请输入', trigger: 'blur' }
    ],
    age: [
        { required: true, message: '请输入', trigger: 'blur' }
    ],
    identityCard: [
        { required: true, message: '请输入', trigger: 'blur' }
    ],
    phone: [
        { required: true, message: '请输入', trigger: 'blur' }
    ],
    wechat: [
        { required: true, message: '请输入', trigger: 'blur' }
    ],
    remark: [
        { required: true, message: '请输入', trigger: 'blur' }
    ],
    qq: [
        { required: true, message: '请输入', trigger: 'blur' }
    ]
})
onBeforeMount(async()=>{
    if(ownerInformation.value.id){
        let resp = await http.get(`/ownerInformation/get/${ownerInformation.value.id}`)
        ownerInformation.value = resp.data
    }
})
async function save(formRef){
    formRef.validate(async function (valid){
        if(valid){
            let path = ownerInformation.value.id ? '/ownerInformation/update' : '/ownerInformation/add'
            let tip = ownerInformation.value.id ? '修改' : '保存'
            let resp = await http.post(path,ownerInformation.value)
            if(resp.code == 200){
            ElMessageBox.alert(tip+'业主成功', tip+'业主', {
            confirmButtonText: 'OK'
           })
            router.go(-1)
           }else{

           }
        }
    })
}
function cancel(){
    router.go(-1)
}

</script>

<style lang="css" scoped>
.form {
    width:400px;
    position: relative;
    right: -200px;
}
.el-form-item__label {
    width: 120px;
}
.type {
    width:400px;
}
.type1 {
    position: relative;
    right: -200px;
}
.pattern {
    position: relative;
    right: -650px;
    top: -100px;
}
.button {
    position: relative;
    right: -900px;
}


</style>